import { FC, useEffect, ReactElement, memo, useState } from 'react'
import { Modal, Button, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { Dispatch, connect, EvaluationStateType, IndicatorListType } from 'umi'
import styles from './index.less'
interface IProps {
  evaluationModel: EvaluationStateType
  visible: boolean
  hide: () => any
  dispatch: Dispatch
  criteriaCode: string
}

const CriteriaPage: FC<IProps> = ({
  evaluationModel,
  visible,
  hide,
  dispatch,
  criteriaCode
}): ReactElement => {
  const { indicatorDetail } = evaluationModel
  const [pageNum, setPageNum] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(10)
  const [total, setTotal] = useState<number>(0)

  const paginationProps = {
    current: pageNum, //当前页码
    pageSize, // 每页数据条数
    showTotal: () => <span>总共{total}项</span>,
    onChange: (page: number, pageSize: number) =>
      handlePageChange(page, pageSize), //改变页码的函数
    total, // 总条数
    hideOnSinglePage: false,
    showSizeChanger: false
  }

  const handlePageChange = (page: number, pageSize: number) => {
    setPageNum(page)
    setPageSize(pageSize)
  }

  const columns: ColumnsType<IndicatorListType> = [
    {
      title: '指标号',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
      width: '150px'
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'left'
    },
    {
      title: '分数',
      dataIndex: 'point',
      key: 'point',
      align: 'center',
      width: '100px'
    },
    {
      title: '评价方式',
      dataIndex: 'type',
      key: 'type',
      align: 'center'
    },
    {
      title: '评价主体',
      dataIndex: 'body',
      key: 'body',
      align: 'center'
    },
    {
      title: '评价依据',
      dataIndex: 'source',
      key: 'source',
      align: 'left'
    }
  ]

  // 获取指标详情
  const getIndicatorDetail = (ruleCode?: string) => {
    dispatch({
      type: 'evaluationModel/function_getRuleItemInfo',
      payload: { ruleCode }
    })
  }

  const handleCancel = () => {
    hide()
  }

  useEffect(() => {
    if (visible) {
      getIndicatorDetail(criteriaCode)
    }
  }, [visible])
  useEffect(() => {
    setTotal(indicatorDetail.length)
  }, [indicatorDetail])
  return (
    <>
      <Modal
        title="评价指标"
        open={visible}
        onCancel={handleCancel}
        width="80%"
        bodyStyle={{
          height: `${window.innerHeight * 0.7}px`,
          overflowY: 'auto'
        }}
        footer={[<Button onClick={handleCancel}>关闭</Button>]}
      >
        <div className={styles['content-wrapper']}>
          {indicatorDetail.length && (
            <Table
              dataSource={indicatorDetail}
              columns={columns}
              rowKey="code"
              pagination={paginationProps}
              defaultExpandAllRows
            />
          )}
        </div>
      </Modal>
    </>
  )
}

const mapStateToProps = ({
  evaluationModel
}: {
  evaluationModel: EvaluationStateType
}) => {
  return {
    evaluationModel
  }
}

export default connect(mapStateToProps)(memo(CriteriaPage))
